<!--
 * @Descripttion: |
 * @version: 1.0
 * @Author: 王娆
 * @Date: 2020-09-03 20:26:13
 * @LastEditors: 王娆
 * @LastEditTime: 2020-09-03 21:14:00
-->
<template>
<!-- 主页面 -->
<div class="index">
  <div class="index_main">
    <div class="main">
    </div>
    <router-view></router-view>
  </div>
  <div class="index_footer">
    <router-link :to="{name:'Home'}" active-class="active" exact>
      <van-icon name="wap-home-o" />
      <span>主页</span>
    </router-link>
    <router-link :to="{name:'Shop'}" active-class="active" exact>
      <van-icon name="search" />
      <span>商城</span>
    </router-link>
    <router-link :to="{name:'Record'}" active-class="active" exact>
      <van-icon name="notes-o" />
      <span>科普</span>
    </router-link>
    <router-link :to="{name:'Personal'}" active-class="active" exact>
      <van-icon name="user-o" />
      <span>个人中心</span>
    </router-link>
  </div>
</div>
</template>

<script>
import {
  mapActions
} from 'vuex'
export default {
  methods: {
    ...mapActions('Login', ['loginUser']),
    login() {
      this.loginUser()
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .index_main {
    flex: 1;
    overflow: auto;
  }

  .index_footer {
    width: 100%;
    height: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-top: 1px solid #ccc;
    z-index: 999;

    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      span {
        font-size: 12px;
        margin-top: 4px;
      }
    }
  }
}

.active {
  color: skyblue;
}
</style>
